﻿@model Cdf54.Ja.SignalR.Chat.Models.ChangePhotoViewModel
@{
    ViewBag.Title = "Change Photo";
}

<h2>@ViewBag.Title.</h2>
<p class="text-success">@ViewBag.StatusMessage</p>
@using (Html.BeginForm("ChangePhoto", "Manage", FormMethod.Post, new { @class = "form-horizontal", role = "form", enctype = "multipart/form-data" }))
{
    @Html.AntiForgeryToken()
    <hr />
    @Html.ValidationSummary("", new { @class = "text-danger" })
    <div class="form-group">
        @Html.Label("Actual photo", new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            <div class="row">
                <div class="col-md-5">
                    <img src="@Html.DisplayFor(m => m.PhotoUrl)" alt="@Model.Pseudo" width="100" title="@Model.Pseudo" />
                    <span id="preview" hidden><kbd>Preview >> </kbd><img id="blah" src="#" alt="" width="100" /></span>
                    <h6><small>@Html.DisplayFor(m => m.PhotoUrl)</small></h6>
                </div>
                <div class="col-md-5">
                    <div id="my_camera" style="width: 320px; height: 240px"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.Photo, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @*@Html.TextBoxFor(m => m.Photo, null, new { id = "filePhoto", onchange = "readURL(this)", type = "file", title = "Search for file to add", @class = "btn btn-primary" })*@
            @*<input id="filePhoto" onchange="readURL(this)" type="file" title="Search for file to add" name="Photo" class="btn btn-primary" />*@
            @*Real Bootstrap input !*@
            <input id="filePhoto" onchange="readURL(this)" type="file" name="Photo" style="visibility:hidden;">
            <div class="input-group">
                <input id="subfile" type="text" class="form-control" placeholder="Search for image file to add..." readonly>
                <span class="input-group-btn">
                    <a id="submitbutton" class="btn btn-primary" onclick="$('#filePhoto').click();">Browse</a>
                </span>
            </div>
            @Html.ValidationMessageFor(m => m.Photo)<br />
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(model => model.UseGravatar, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @*Obsolete*@
            @*@Html.CheckBoxFor(model => model.UseGravatar, new { @onclick = "UseGravatarClick('" + @Model.Email + "',100" + ")" })*@

            @Html.CheckBoxFor(model => model.UseGravatar, new Dictionary<string, object>
                {
                    {"id", "UseGravatar"},
                    { "data-email", @Model.Email },
                    { "data-size", "100" },
                })
            <small class="text-muted"> See <a title="My gravatar" href="https://fr.gravatar.com/" target="_blank">Gravatar Web Site</a></small>
        </div>
    </div>
    //[10019] Use provider avatar by default for external login ADD: this function in Profile Change photo.
    <div class="form-group">
        @Html.LabelFor(model => model.UseSocialNetworkPicture, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.CheckBoxFor(model => model.UseSocialNetworkPicture, new Dictionary<string, object>
                {
                    {"id", "UseSocialNetworkPicture"},
                    { "data-ExternalProvider", @Model.ExternalProvider },
                    { "data-ParameterProvider", @Model.ParameterProvider },
                })
        </div>
    </div>
    //[10019]

    //[10031] ADD: webcam function for webcamjs
    <div class="form-group">
        @Html.Label("WebCamJS capture", new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.CheckBox("WebCam")
            <input id="capture_button" type="button" value="Capture" class="btn btn-primary btn-xs" />
            <input id="upload_button" type=button value="Upload Photo" class="btn btn-primary btn-xs">
        </div>
    </div>
    //[10031]
    
    //[10031] ADD: webcam function for jquery.webcam.js
    <div class="form-group">
        @Html.Label("JQWebCam capture", new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.CheckBox("JQWebCam")
            <input id="JQcapture_button" type="button" value="Capture" class="btn btn-primary btn-xs" />
        </div>
    </div>
    //[10031]
    
    @* if user don't have photo don't propose to remove it*@
    if (!(Model.PhotoUrl.Contains("BlankPhoto.jpg")))
    {
        <div class="form-group">
            @Html.LabelFor(model => model.IsNoPhotoChecked, new { @class = "col-md-2 control-label" })
            <div class="col-md-10">
                @Html.CheckBoxFor(model => model.IsNoPhotoChecked)
            </div>
        </div>
    }
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input id="change_photo_button" type="submit" value="Change photo" class="btn btn-primary" />
        </div>
    </div>
}
        @section Scripts {
            @Scripts.Render("~/bundles/jqueryval")
            @Scripts.Render("~/bundles/chatphoto")
            <script src="@Url.Content("~/Scripts/webcam.js")"></script>
            <script src="@Url.Content("~/Scripts/jquery.webcam.js")"></script>
            <script type="text/javascript">
                var rootDir = "@Url.Content("~/")";
            </script>
        }
